<template>
    <div>
      <div class="gongneng">
        <div>
          <a-checkbox @change="dataSelectChange" class="font"
            >全选/取消
          </a-checkbox>
          <a-button type="primary" size="small" ghost @click="counterelection"
            >反选</a-button
          >
        </div>
        <div>
          <a-button type="primary" size="small" icon="plus"> 提交审核 </a-button>
        </div>
      </div>
      <!-- 查询区域 -->
      <div class="table-page-search-wrapper">
        <a-form
          :label-col="{ span: 6 }"
          :wrapper-col="{ span: 18 }"
          @keyup.enter.native="searchQuery"
        >
          <a-row :gutter="24">
            <a-col :xl="5" :lg="7" :md="8" :sm="24">
              <a-form-item label="项目名称:" class="font">
                <a-input></a-input>
              </a-form-item>
            </a-col>
            <a-col :xl="5" :lg="7" :md="8" :sm="24">
              <a-form-item label="项目编号:" class="font">
                <a-input></a-input>
              </a-form-item>
            </a-col>
            <a-col :xl="5" :lg="7" :md="8" :sm="24">
              <a-form-item label="行政区:" class="font">
                <a-select>
                  <a-select-option value="0">未公布</a-select-option>
                  <a-select-option value="1">已公布</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :xl="3" :lg="7" :md="8" :sm="24">
              <a-form-item>
                <a-select>
                  <a-select-option value="0">未公布</a-select-option>
                  <a-select-option value="1">已公布</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :xl="5" :lg="7" :md="8" :sm="24">
              <span
                style="float: left; overflow: hidden"
                class="table-page-search-submitButtons"
              >
                <a-button type="primary" @click="searchQuery" icon="search"
                  >查询</a-button
                >
                <a-button
                  type="primary"
                  @click="searchReset"
                  icon="reload"
                  class="cz"
                  >重置</a-button
                >
              </span>
            </a-col>
          </a-row>
        </a-form>
      </div>
      <a-table
        bordered
        rowKey="id"
        ref="table"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="ipagination"
        :row-selection="{
          selectedRowKeys: selectedRowKeys,
          onChange: onSelectChange,
        }"
      >
      </a-table>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        columns: [
          {
            title: "序号",
            dataIndex: "",
            key: "rowIndex",
            width: 50,
            align: "center",
            customRender: function (t, r, index) {
              return parseInt(index) + 1;
            },
          },
          {
            title: "项目名称",
            dataIndex: "pjtname",
            align: "left",
            scopedSlots: { customRender: "pjtname" },
          },
          {
            title: "项目编号",
            dataIndex: "xzq",
            align: "left",
          },
          {
            title: "净增耕地面积（公顷）",
            dataIndex: "babh",
            align: "left",
          },
          {
            title: "净增耕地中水田面积（公顷）",
            dataIndex: "stype",
            align: "left",
          },
          {
            title: "净增产能指标",
            dataIndex: "nymj",
            align: "left",
          },
          {
            title: "最近操作时间",
            dataIndex: "scmj",
            align: "left",
          },
          {
            title: "操作",
            width: 120,
            dataIndex: "action",
            align: "center",
            scopedSlots: { customRender: "action" },
          },
        ],
        ipagination: {
          current: 1,
          pageSize: 10, // 默认每页显示数量
          pageSizeOptions: ["10", "20", "30"],
          showTotal: (total, range) => {
            return "共" + total + "条";
          },
          showQuickJumper: true,
          showSizeChanger: true,
          total: 0,
        },
        selectedRowKeys: [],
        dataSource: [
          {
            pjtname: "五莲县果树大本营种植园(三期大榆林)",
            xzq: "20240607889922",
          },
        ],
      };
    },
    methods: {
      //表格复选框事件
      onSelectChange(selectedRowKeys) {
        this.selectedRowKeys = selectedRowKeys;
      },
      //全选/取消事件
      dataSelectChange(e) {
        if (this.dataSource.length != 0) {
          var arr = [];
          this.dataSource.map((item, index) => {
            arr.push(index);
          });
          this.selectedRowKeys = e.target.checked == true ? arr : [];
        }
      },
      //反选
      counterelection() {
        this.iscont = !this.iscont;
        if (this.dataSource.length != 0) {
          const arr = [];
          this.dataSource.map((item, index) => {
            arr.push(index);
          });
          this.selectedRowKeys = this.iscont == true ? arr : [];
        }
      },
    },
  };
  </script>
  
  <style lang="less" scoped>
  .font {
    font-weight: 700;
    font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto,
      "Helvetica Neue", Arial, "PingFang SC", "Hiragino Sans GB",
      "Microsoft YaHei", sans-serif;
    color: #4d5259;
  }
  .gongneng {
    padding-bottom: 15px;
    display: flex;
    justify-content: space-between;
    border-radius: 4px;
    border: 1px solid #f0f0f0;
    padding: 10px;
  }
  .cz {
    margin-left: 8px;
  }
  .table-page-search-wrapper{
      margin-top: 10px;
  }
  </style>